<template>
    <div class="water-payment-02">
        <c-wrap title="缴费">
            <p class="mint-radiolist-title">账户信息
                <mt-button plain size="small" @click="loadData">
                    <icon clazz="icon-repeat__easyi" style="width: 16px;height: 16px;"></icon>
                </mt-button>
            </p>
            <div style="background-color: white">
                <mt-cell title="户号">{{user.householdNo}}<span style="font-size: 14px">({{user.name}})</span></mt-cell>
                <mt-cell title="账户余额">
                    <div style="color: dodgerblue;font-weight: bolder">
                        <span v-if="charge">{{charge.balance}}</span>
                        <span v-else>--</span></div>
                    元
                </mt-cell>
                <mt-cell title="当前欠费">
                    <div style="color: red;font-weight: bolder">
                        <span v-if="charge">{{charge.arrearage}}</span>
                        <span v-else>--</span></div>
                    元
                </mt-cell>
            </div>
            <mt-radio align="right" title="支付方式" v-model="payment.payType" :options="options.mode"></mt-radio>
            <p class="mint-radiolist-title">支付金额</p>
            <div class="flex-wrap"
                 style="background-color: white;padding-bottom: 5px;border-top: solid 0.5px gainsboro">
                <mt-button v-for="(item,index) in options.price" :key="index" size="small"
                           :type='payment.money===item.value?"primary":"default"' @click="clickPrice(item.value)">
                    {{item.label}}
                </mt-button>
            </div>
            <mt-field label="其他金额" v-model="payment.money"
                      style="border-bottom: solid 0.8px gainsboro">
                <div style="margin-right: 30px">元</div>
            </mt-field>
            <mt-button type="primary" @click="click" style="margin-bottom: 10px">立即缴费</mt-button>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                user: {
                    householdNo: app.util.localStorage('user.householdNo'),
                    name: app.util.localStorage('user.name')
                },
                platform: app.config.setting.platform,
                charge: {
                    balance: 0,
                    arrearage: 0,
                },
                payment: {
                    payType: '1',
                    money: '50'
                },
                options: {
                    mode: [
                        {
                            label: '微信支付',
                            value: '1'
                        },
                        {
                            label: '支付宝支付',
                            value: '2'
                        }
                    ],
                    price: [
                        {
                            label: '20元',
                            value: '20'
                        },
                        {
                            label: '30元',
                            value: '30'
                        },
                        {
                            label: '50元',
                            value: '50'
                        },
                        {
                            label: '100元',
                            value: '100'
                        },
                        {
                            label: '300元',
                            value: '300'
                        },
                        {
                            label: '500元',
                            value: '500'
                        }
                    ]
                }
            }
        },
        methods: {
            clickPrice(val) {
                this.payment.money = val;
            },
            click() {
                if (this.platform === 'mobile') {
                    this.$toast({
                        message: '暂不支持移动支付!',
                        duration: 2000
                    })
                    return;
                }
                if (this.payment.payType == 1) {
                    if (app.config.setting.platform === "wechat") {
                        this.weChatPay();
                    } else {
                        this.$toast({
                            message: '暂不支持微信支付！',
                            duration: 2000
                        })
                    }
                } else {
                    this.$toast({
                        message: '暂不支持支付宝支付！',
                        duration: 2000
                    })
                }
            },
            weChatPay() {
                app.ajax.post(app.config.api.bill.recharge, {
                    money: Number(this.payment.money),
                    payType: Number(this.payment.payType)
                }, (res) => {
                    app.wechat.chooseWXPay(res.data, () => {
                        // 支付成功后的回调函数
                        this.$toast({message: '支付完成'});

                        this.loadData();
                    }, () => {
                        this.deleteOrder(param.orderId);

                        this.$toast('支付订单已取消');
                    });
                })
            },
            deleteOrder(orderId) {
                if (orderId) {
                    app.ajax.delete(app.config.api.wechat.order, {id: orderId});
                }
            },
            loadData() {
                app.ajax.get(app.config.api.bill.recharge, {}, (res) => {
                    this.charge = res.data;
                })
            }
        },
        mounted() {
            this.loadData();
            this.$nextTick(() => {
                if (this.charge && this.charge.arrearage > 0) {
                    this.payment.money = this.charge.arrearage;
                }
            })
        }
    }
</script>
<style>
    .water-payment-02 .mint-radiolist-title {
        text-align: left;
    }

    .water-payment-02 .mint-radiolist-label {
        padding: 0;
    }

    .water-payment-02 .mint-radio-label {
        margin-left: 0;
    }

    .water-payment-02 .mint-field-core {
        text-align: right;
    }

    .water-payment-02 .mint-field .mint-cell-wrapper {
        background-image: unset;
    }

    .water-payment-02 .mint-field .mint-cell-value {
        width: 60%;
    }

    .water-payment-02 .flex-wrap .mint-button--small {
        margin: 20px 0 0 7%;
        width: 24%;
    }

    .water-payment-02 .flex-wrap .mint-button--primary {
        border-radius: 4px;
    }

    .water-payment-02 .mint-radiolist-title .mint-button--small {
        font-size: 12px;
        padding: 0;
        height: 16px;
    }

    .water-payment-02 .mint-radiolist-title .mint-button {
        float: right;
    }
</style>
